<!doctype html>
<head>
		<title>Sphere Example</title>
		<script src="../dist/threebox.js" type="text/javascript"></script>
		<script src="config.js"></script>

		<script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
		<link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
		<style>
				body, html { 
						width: 100%;
						height: 100%;
						margin: 0;
				}
				#map { 
						width: 100%;
						height: 100%;
				}
		</style>
</head>
<body>
	<div id='map' class='map'></div>

	<script>

		if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
		
		mapboxgl.accessToken = config.accessToken;

		//starting location for both map and eventual sphere
		var origin = [-122.4340, 37.7353, 500];

		var map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/mapbox/light-v9',
			center: origin,
			zoom: 16,
			pitch: 60
		});


		map.on('style.load', function() {

			map.addLayer({
				id: 'custom_layer',
				type: 'custom',
				onAdd: function(map, mbxContext){

					tb = new Threebox(
						map, 
						mbxContext,
						{defaultLights: true}
					);

					//instantiate a red sphere and position it at the origin lnglat
					var sphere = tb.sphere({color: 'red', material: 'MeshStandardMaterial'})
						.setCoords(origin);

					// add sphere to the scene
					tb.add(sphere);

				},
				
				render: function(gl, matrix){
					tb.update();
				}
			})
		});

	</script>
</body>